<template>
  <el-dialog
    title="成绩录入"
    class="gl_dialog_TitleLine gl_dl_footer"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="cancelDialog"
    width="600px"
  >
    <el-form ref="studentVO" v-loading="loading" class="gl_form_mini" :model="studentVO" :rules="studentVO_rules" style="padding: 0 30px" label-width="100px">
      <el-form-item label="证件号码">
        <div>{{ studentVO.idCardNumber }}</div>
      </el-form-item>
      <el-form-item label="联系方式">
        <div>{{ studentVO.phoneNumber }}</div>
      </el-form-item>
      <el-form-item label="当前级别">
        <span v-if="studentVO.levelType && studentVO.duanType">{{ studentVO.levelType.name + ' / ' + studentVO.duanType.name }}</span>
        <span v-else>{{ studentVO.levelType ? studentVO.levelType.name : '' }} {{ studentVO.duanType ? studentVO.duanType.name : '' }}</span>
      </el-form-item>
      <el-form-item label="申报级别">
        <span v-for="(item, index) in studentVO.duanExamStudentDuans" :key="item.duanId">
          {{ item.duan ? item.duan.name : '' }} {{ studentVO.duanExamStudentDuans.length - 1 === index ? '': '/' }}
        </span>
      </el-form-item>
      <el-form-item label="教练">
        <div>{{ studentVO.coachName }}</div>
      </el-form-item>
      <el-form-item label="提交机构">
        <div>{{ studentVO.organizationUnitName }}</div>
      </el-form-item>
      <el-form-item label="成绩" prop="score">
        <el-input v-model="studentVO.score" placeholder="请输入成绩" size="mini" type="number" max="1000" />
      </el-form-item>
      <el-form-item label="考官" prop="duanExamOfficialId">
        <el-select v-model="studentVO.duanExamOfficialId" size="mini" placeholder="请选择考官姓名">
          <el-option v-for="item in officials" :key="item.id" :value="item.id" :label="item.name" />
        </el-select>
      </el-form-item>
      <el-form-item label="考试结果" prop="scoreStatusCode">
        <el-select v-model="studentVO.scoreStatusCode" size="mini" placeholder="请选择考试结果">
          <el-option v-for="item in dict.scoreStatus" :key="item.code" :value="item.code" :label="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="cancelDialog">取消</el-button>
      <el-button type="primary" :loading="btnLoading" size="mini" @click="submit()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { CopyData } from '@/lib';
import { mapState, mapActions } from 'vuex';
import validator from '@/lib/validate/index.js';
import {
  ScoreRegistrationInput // 录入学生的考试成绩
} from '@/lib/form/hall/swaggerForm';
import {
  api_PUT_ClubDuanExamStudentScoreScoreRegistrationDuanExamStudentId, // 录入学生的考试成绩
  api_GET_ClubDuanExamOfficial // 获取考官 duanExamId
} from '@/extend/api/hallswaggerApi/app';
export default {
  data() {
    return {
      duanExamId: '',
      dialogVisible: false,
      loading: false,
      btnLoading: false,
      studentVO: {
        id: '',
        idCardNumber: '',
        phoneNumber: '',
        levelType: null,
        duanType: null,
        duanExamStudentDuans: null,
        coachName: '',
        organizationUnitName: '',
        score: 0,
        scoreStatusCode: null,
        duanExamOfficialId: null
      },
      officials: [],
      studentVO_rules: {
        score: [
          { required: true, message: '成绩不能为空', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              callback(validator.checkPrice(value, '请输入正确的成绩格式，至多保留小数点后两位'));
            },
            trigger: 'blur'
          }],
        duanExamOfficialId: [{ required: true, message: '考官不能为空', trigger: 'blur' }],
        scoreStatusCode: [{ required: true, message: '考试结果不能为空', trigger: 'blur' }]
      }
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 录入学生的考试成绩
    submit() {
      this.$refs.studentVO.validate(valid => {
        const that = this;
        if (valid) {
          this.btnLoading = true;
          const qo = new ScoreRegistrationInput();
          CopyData(this.studentVO, qo);
          qo.score = Number(qo.score);
          api_PUT_ClubDuanExamStudentScoreScoreRegistrationDuanExamStudentId(this.studentVO.id, qo).then(res => {
            this.btnLoading = false;
            this.cancelDialog();
            this.$message({ type: 'success', message: '审核成功' });
            this.$parent.getPageList(that.$parent.qo.Page);
          }, error => {
            this.btnLoading = false;
            const _msg = error.error.message || error.message;
            this.$message({ type: 'error', message: _msg });
          });
        } else {
          return false;
        }
      });
    },
    // 获取考官
    getExamOfficial(duanExamId) {
      api_GET_ClubDuanExamOfficial({ duanExamId: duanExamId }).then(res => {
        this.officials = res;
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    cancelDialog() {
      this.dialogVisible = false;
      this.studentVO = {
        id: '',
        idCardNumber: '',
        phoneNumber: '',
        levelType: null,
        duanType: null,
        duanExamStudentDuans: null,
        coachName: '',
        organizationUnitName: '',
        score: 0,
        scoreStatusCode: null,
        duanExamOfficialId: null
      };
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
